<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>

    <div id="app">

        <!-- 会调用 Vue 实例中 filters 中的 formatDate 对应的函数进行处理, 将 date 作为参数传入-->
        <div>{{ date | formatDate }}</div>

        <!-- 串联使用 -->
         <!-- 过滤器可以串联使用, 会先将 message 传入 filterA 处理之后将结果传入 filterB 进行处理,获得最终的结果 -->
        <div>{{ message | filterA | filterB }}</div>


        <!-- 接收参数 -->
        <!-- 这里的 arg1 和 arg2 将作为 filterC 的第二个和第三个参数传入 -->
        <div>{{ message| filterC('arg1', 'arg2') }}</div>


        <!-- 注: 过滤器应当用于处理简单的文本转换, 如果要实现更为复杂的数据变换, 应该使用计算属性-->

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var padDate = function (value) {
            return value < 10 ? '0' + value: value;
        };

        var app = new Vue({
            el: "#app",
            data: {
                date: new Date(),
                message: "message"
            },

            filters: {
                formatDate: function (value) {
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDay());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());

                    // 将整理好的数据返回出去
                    return year + '-' + month + '-' + day + " " + hours + ":" + minutes + ":" + seconds;
                },
                filterA: function (value) {
                    return value + "|" + "filterA"
                },
                filterB: function (value) {
                    return value + "|" + "filterB"
                },
                filterC: function (value, arg1, arg2) {
                    return value + "|" + arg1 + "|" + arg2
                }
            },
            mounted: function () {
                var _this = this;   // 声明一个变量指向 Vue 实例 this, 保证作用域一致
                this.timer = setInterval(function () {
                    _this.date = new Date();    // 修改数据 date
                }, 1000);
            },

            beforeDestroy: function () {
                if(this.timer){
                    clearInterval(this.timer);   // 在 Vue 实例销毁前, 清除我们的定时器
                }
            }


        });

    </script>

</body>
</html>